<script setup lang="ts">
import { ref } from 'vue'

let msg=ref<string>('吃好喝好，心态超好~')
let timer=ref<number>()
let isDisabled=ref<boolean>(false)
//开始
function start(){
  // console.log(msg.value)
  isDisabled.value=!isDisabled.value
  //获取到第一个字符
  console.log(msg.value.substring(0,1))
  //获取到剩下的字符
  console.log(msg.value.substring(1))
  //剩下的字符拼接到截取的第一个字符
  // msg.value=msg.value.substring(1)+msg.value.substring(0,1)

  timer.value=setInterval(()=>{
    msg.value=msg.value.substring(1)+msg.value.substring(0,1)
  },300)
}

//暂停
function paused(){
  isDisabled.value=!isDisabled.value
 clearInterval(timer.value)
}
</script>

<template>
  <button @click="start" :disabled="isDisabled">开始</button>
  <button @click="paused" :disabled="!isDisabled">暂停</button>
  <div>{{msg}}</div>
</template>

<style scoped>

</style>
